<template>
   <div>
     <div class="verification">
       <p>你的手机号码</p>
       <input type="text" placeholder="点击输入手机号" maxlength="11" class="telephone" v-model="phone" />
       <p class="num">验证码</p>
       <input type="text" placeholder="点击输入验证码"  class="number" v-model="number" />
       <div type="button" id="btn" @click="getcode" v-bind:style="{backgroundColor:bgcolor}">
         {{codeinfo}}
       </div>
       <p class="tip">*该手机号码必须是已经在水电缴费管理系统中登记的。</p>
       <v_button @click.native="fa_login"></v_button>
     </div>
   </div>
</template>

<script>
  import v_button from '@/components/public/button'
    export default {
      name:'fa_login',
      components:{
        v_button:v_button
      },
      data:function () {
        return {phone:'',number:''}
      },
      methods:{
        fa_login:function () {
          if(this.phone==""){
            this.$layer.msg("手机号码不能为空",{time:1});
            return;
          }
          if(this.number==""){
            this.$layer.msg("验证码不能为空",{time:1});
            return;
          }
        }
      }
    }
</script>

<style scoped>
  .verification{
    padding:.9rem .16rem 0 .16rem;
    background-color: #fff;
  }
  .verification p{
    font-size: .18rem;
    text-align: left;
    color: #444;
  }
  .verification input{
    border: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    width: 100%;
    line-height: .5rem;
    color: #444;
    font-size: .12rem;
    display: inline-block;
    border-bottom: 1px solid #eee;
  }
  .num{
    margin-top: .3rem;
  }
  .number{
    width:68% !important;
  }
  #btn{
    width: 32% !important;
    float: right;
    background-color: #178cf9;
    color: #fff;
    font-size: .12rem;
    height: .5rem
  }
  .verification .tip {
    font-size: .12rem;
    color: #ff7214;
    margin: .15rem 0;
  }
</style>
